<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }
        .header {
            width: 1320px;
            height: 26px;
            margin: 20px auto;
            margin-bottom: 0;
            background-color: #fff;
        }
        li {
            
            list-style: none;
        }
        .left ul li a {
            display: block;
            float: left;
            margin-right: 30px;
            text-decoration: none;
            font-size: 13px;
            color: #000;

        }
        .right ul li a {
            display: block;
            float: right;
            margin-left: 30px;
            text-decoration: none;
            font-size: 13px;
            color: #000;
        }
        .right ul li a span {
            background-color: #4e6ef2;
            border-radius: 7px;
            padding: 3px 11px;
            color: #fff;
            /* text-height: auto; */
        }
        .header ul li a:hover {
            color: #4e6ef2;
        }
        .right ul li .fei {
            color: red;
            background-color: #fff;
        }
        .right ul li .fei:hover {
            color: #4e6ef2;
        }
      div img {
        display: block;
            margin: 0 auto;

            width: 270px;
            height: 130px;
      }
      form {
           position: relative;
           left: 50%;
           margin-left: -330px;
           margin-top: 10px;
      }
      input:visited {
          border: 2px solid #4e6ef2;
          border-radius: 10px 0 0 10px;
      }
      .text {
          width: 550px;
          height: 40px;
          
          border: 2px solid #c4c7ce;
          border-radius: 10px 0 0 10px;
      }
     
      button {
          position: relative;
          left: -3px;
          bottom: -2px;
          width: 108px;
          height: 44px;
          color: #fff;
          background-color: #4e6ef2;
          border-radius: 0 10px 10px 0;
          border-width: 0;
          font-size: 17px;
      }
      
      .re {
          position: relative;
          width: 670px;
          height: 190px;
          margin: 50px auto;
          color: #000;
      }
      .z  {
          position: absolute;
          left: 0;
          line-height: 33px;
          font-size: 14px;
          
      }
      .z p span {
          background-color: #f00;
          padding: 0 2px;
          border-radius: 3px;
          color: #fff;
          margin-left: 2px;

      }    
      
      .re p a {
          text-decoration: none;
          color: #000;
      }
      .y {
          position: absolute;
          right: 0;
          line-height: 33px;
          font-size: 14px;
      }
      .y p span {
        background-color: #00f;
          padding: 0 2px;
          border-radius: 3px;
          color: #fff;
          margin-left: 2px;

      }
      .re p a:hover {
          color: #4e6ef2;
          text-decoration: underline;
      }
     
      .y h6 a {
          color: #9195a3;
          text-decoration: none;
          font-weight: 400;
      }
      .y h6 a:hover {
          color: #4e6ef2;

      }
      h6 {
          text-align: right;
          color: #9195a3;
          font-size: 13px;
      }
      .re p .shu {
          text-decoration: none;
          color: #9195a3;
          background-color: #fff;
          font-size: 10px;
      }
      .shu:hover {
          text-decoration: none;
          
      }
      footer {
          width: 100%;
          height: 44px;
          position: relative;
          padding: 0 16px;
          bottom: -103px;
          background-color: #fafafa;
      }
      .le ul li {
          position: absolute;
          float: left;
          /* margin-right: 30px; */
          
         }
      .le ul li a {
             text-decoration: none;
             color: #9195a3;
             font-size: 12px;
             margin: 0 11px;
         }
        .le ul li a:hover {
            color: #000;
        }
      .ri ul li {
           /* position: absolute; */
           float: right;
           margin: 0 11px;
           color: #9195a3;
           font-size: 11px;
      }
      .ri ul li a {
        color: #9195a3;
        text-decoration: none;
      }
      .ri ul li a:hover {
          color: #000;
      }
    </style>
</head>
<body>
    <div class="header">
        <div class="left">
         <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#">hao123</a></li>
            
            <li><a href="#">地图</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">贴吧</a></li>
            <li><a href="#">学术</a></li>
            <li><a href="#">更多</a></li>
         </ul>
        </div>
        <div class="right">
            <ul>
                <li>
                    <a href="#"><span>登录</span></a>
                    <a href="#">设置</a>
                    <a href="#"><span class="fei">抗击肺炎</span></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 图片 -->
    <div>
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    </div>
    <!-- 输入框 -->
    <form>
        <input type="text" class="text" ><button>百度一下</button>
        
    </form>
    <!-- 百度热榜块 -->
    <div class="re">
        <div class="z">
            <p>百度热榜</p>
            <P><a href="#"><span class="shu">1</span>&nbsp;&nbsp;广州新肺炎危重症者清零<span>热</span></a></P>
            <p><a href="#"><span class="shu">2</span>&nbsp;&nbsp;陶勇复诊再遇为他挡刀患者家属<span>新</span></a></p>
            <p><a href="#"><span class="shu">3</span>&nbsp;&nbsp;建议对研究生毕业生进行分级评价</a></p>
        </div>
        <div class="y">
            <h6><a href="#">换一换</a></h6>
            <P><a href="#"><span class="shu">4</span>&nbsp;&nbsp;广州新肺炎危重症者清零<span>沸</span></a></P>
            <p><a href="#"><span class="shu">5</span>&nbsp;&nbsp;陶勇复诊再遇为他挡刀患者家属</a></p>
            <p><a href="#"><span class="shu">6</span>&nbsp;&nbsp;建议对研究生毕业生进行分级评价</a></p>
        </div>
    </div>
    <!-- 底部 -->
    <footer>
    <div class="le">
     <ul>
         <li>
             <a href="#">设为首页</a>
             <a href="#">关于百度</a>
             <a href="#">About Baidu</a>
             <a href="#">推广百度</a>
             <a href="#">使用百度前必读</a>
             <a href="#">意见反馈</a>
             <a href="#">帮助中心</a>
         </li>
     </ul>
    </div>
    <div class="ri">
        <ul>
            <li>京IPC证0317403号</li>
            <li><a href="#">京公网安备2010002000301号</a></li>
            <li>(京)-经营性-2017-0020</li>
            <li>@2020 Baidu</li>
        </ul>
    </div>
    </footer>
</body>
</html>